@*
* Copyright 2015 Yahoo Inc. Licensed under the Apache License, Version 2.0
* See accompanying LICENSE file.
*@
@(cluster: String, brokerId: Int, brokerView :kafka.manager.model.ActorModel.BVView)(implicit messages: play.api.i18n.Messages, request:RequestHeader)

@renderBrokerMetrics = {
    @if(brokerView.clusterContext.clusterFeatures.features(kafka.manager.features.KMJMXMetricsFeature)) {
        @views.html.common.brokerMetrics(brokerView.metrics)
    } else {
        <div class="alert alert-info" role="alert">
            Please enable JMX polling <a href="@routes.Cluster.updateCluster(cluster).relative" class="alert-link">here</a>.
        </div>
    }
}

        <div class="row">
            <div class="col-md-7">
                <div class="card">
                    <div class="card-header"><h4>Summary</h4></div>
                    <div class="card-body">
                    <table class="table">
                        <tbody>
                        <tr><td># of Topics</td><td>@brokerView.numTopics</td></tr>
                        <tr><td># of Partitions</td><td>@brokerView.numPartitions</td></tr>
                        <tr><td># of Partitions as Leader</td><td>@brokerView.numPartitionsAsLeader</td></tr>
                        @if(brokerView.clusterContext.clusterFeatures.features(kafka.manager.features.KMJMXMetricsFeature)) {
                        <tr><td>% of Messages</td><td>@brokerView.stats.map(_.perMessages)</td></tr>
                        <tr><td>% of Incoming</td><td>@brokerView.stats.map(_.perIncoming)</td></tr>
                        <tr><td>% of Outgoing</td><td>@brokerView.stats.map(_.perOutgoing)</td></tr>
                        }
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card">
                    <div class="card-header"><h4>Metrics</h4></div>
                    <div class="card-body">
                    @renderBrokerMetrics
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h4>Messages count</h4></div>
                    <div class="card-body">
                    <div class="ct-chart"></div>
                    <script>
                        var options = {
                            axisY: {
                                type: Chartist.AutoScaleAxis,
                                low: @brokerView.messagesPerSecCountHistory.map(v => v.head.count - 1).getOrElse(0),
                                high: @brokerView.messagesPerSecCountHistory.map(v => v.last.count + 1).getOrElse(0),
                                onlyInteger: true
                            }
                        };
                        var data = {
                          labels: [@Html(brokerView.messagesPerSecCountHistory.map(_.map(v => s"'${v.date.toString("HH:mm:ss")}'").mkString(",")).getOrElse(""))],
                          series: [
                            [@brokerView.messagesPerSecCountHistory.map(_.map(_.count).mkString(","))]
                          ]
                        };
                        new Chartist.Line('.ct-chart', data, options);
                    </script>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header"><h4>Per Topic Detail</h4></div>
            <div class="card-body">
            <table class="table" id="broker-table" style="table-layout: fixed; width: 100%">
                <thead>
                <tr>
                    <th>Topic</th>
                    <th>Replication</th>
                    <th>Total Partitions</th>
                    <th>Partitions on Broker</th>
                    <th>Partitions</th>
                    <th><span title="Broker has more partitions than the average">Skewed?</span></th>
                    <th># Partitions as Leader</th>
                </tr>
                </thead>
                <tbody>
                @for((ti,bp) <- brokerView.topicPartitions) {
                <tr>
                    <td><a href="@routes.Topic.topic(cluster,ti.topic)">@ti.topic</a></td>
                    <td>@ti.replicationFactor</td>
                    <td>@ti.partitions</td>
                    <td>@bp.partitions.size</td>
                    <td style="word-wrap: break-word">@bp.partitions.mkString("(",",",")")</td>
                    <td>@ti.partitionsByBroker.find(_.id == brokerId).map(_.isSkewed).getOrElse("Unknown")</td>
                    <td>@bp.partitionsAsLeader.size</td>
                </tr>
                }
                </tbody>
            </table>
            </div>
        </div>

